<template>
    <div class="header">
        <h1 class="title">尚硅谷低代码平台</h1>
        <el-space>
            <el-button type="primary" size="small" @click="showCode">出码</el-button>
            <!-- <router-link to="/preview" target="_blank">
            <el-button type="primary" size="small">
                预览
            </el-button>
            </router-link> -->
            <el-button type="primary" size="small" @click="preview">
                预览
            </el-button>
        </el-space>
    </div>

    <el-dialog v-model="visible" title="代码">
        <div class="code-container">
            <CodeEditor v-model="code" :options="{readOnly: true}" />
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useCompileCode } from '@/components/CodeEditor/hooks';
defineOptions({
    name: "Header",
});
import useEditorStore from '@/store/modules/editor';
const editorStore = useEditorStore();


const preview = () => {
    sessionStorage.setItem("componentList", JSON.stringify(editorStore.componentList));
    window.open("/preview");
};

const {compileCode} = useCompileCode()

const code = ref("");

const visible = ref(false);
const showCode = async () => {
    visible.value = true;
    code.value = await compileCode(
        {
            componentList: editorStore.componentList
        },
        "list"
    );
};
</script>

<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.title {
    margin: 0;
    font-size: 18px;
}
.code-container {
    height: 400px;
}
</style>